<template>
  <div class="container">
    <form @submit="formSubmit" bindreset="formReset">
      <div class="zan-panel">
        <div class="zan-row row">
          <checkbox-group class="checkbox-group" style="margin-left:1em" name="workType">
            <label class="checkbox zan-col zan-col-9" v-for="type in workTypeOptions" :key="type.key">
              <checkbox :value="type.key" :checked="type.checked" /> {{type.label}}
            </label>
          </checkbox-group>
        </div>

        <div class="zan-row row">
          <div class="zan-btns">
            <button class="zan-btn zan-btn--warn" formType="submit">确定</button>
          </div>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
import App from './index'
import { api } from '@/api/worker'
export default {
  data() {
    return {
      id: undefined,
      overlayArea: '',
      cityData:undefined,
      province:undefined,
      worker:undefined
    }
  },
  onShow(){
      console.log('-----onLoad-----')
      this.worker = this.$mp.query
      this.getOverCity(this.worker)
     // this.worker = this.$root.$mp.query
      //console.log(this.$root.$mp.query)
    // this.id = this.$root.$mp.query.id
    // this.overlayArea = this.$root.$mp.query.overlayArea
    // this.province = this.$root.$mp.query.province
    // this.cityData = this.$root.$mp.query.cityData
   // this.worker = this.$root.$mp.query
  // console.log(this.$root.$mp.query)
  },
  methods: {
    /**
     * 修改工人安装类目
     */
    formSubmit: function(e) {
      api
        .updateWorkType({
          id: 215,
          workType: this.getWorkTypeStr(e.mp.detail.value.workType)
        })
        .then(res => {
          if (res.code == 0) {
            wx.navigateTo({ url: '../edit/auth' })
          } else {
            wx.showToast({
              title: res.message,
              duration: 2000
            })
          }
        })
    },
    changeWorkTypeChecked() {
      if (this.workType.length > 0) {
        for (let i = 0; i < this.workType.length; i++) {
          this.workTypeOptions[i].checked = 'true'
        }
      }
    },
    getWorkTypeStr(workTypeArr) {
      var workTypeStr = ''
      for (let index = 0; index < workTypeArr.length; index++) {
        if (index == workTypeArr.length - 1) {
          workTypeStr = workTypeStr + workTypeArr[index]
        } else {
          workTypeStr = workTypeStr + workTypeArr[index] + ','
        }
      }
      return workTypeStr
    },
    getOverCity(worker) {
      if (worker.province != undefined) {
        api.getCitysByParent({ code: worker.province }).then(response => {
          if (response.data !== undefined && response.data.length > 0) {
            //console.log(response.data)
          }
        })
      } 
    },
    setInitStatus(avaCityArr) {
      var count = 0
      for (let i = 0; i < avaCityArr.length; i++) {
        let item = avaCityArr[i]
        item.isOver = this.isOver(item.code)
        if (item.subCitys != undefined) {
          this.setInitStatus(item.subCitys)
        }
      }
    },
    /**
     * 判断当前code是否已经覆盖，是则返回true,否返回false
     */
    isOver(code) {
      if (this.overlayAreaArr != undefined) {
        if (this.overlayAreaArr.indexOf(code.toString()) != -1) {
          return true
        } else {
          return false
        }
      } else {
        return false
      }
    }
  }
}
</script>
<style  scoped>
.container {
  background-color: #efeff0;
}
.zan-panel {
  background: #fff;
  margin-top: 0rpx;
  overflow: hidden;
}
.row .zan-col {
  margin-top: 1em;
  margin-left: 1.5em;
}
/* .zan-tag{
    margin-left: 93.75px;
}
.zan-tag + .zan-tag {
  padding-left: 93.75px;
} */
/* .zan-col {
  line-height: 30px;
  text-align: center;
  font-size: 12px;
  color: black;
  width: 187.5px;
} */
</style>
